import { QuestionCircleOutlined } from '@ant-design/icons';
import { Divider, Tooltip } from 'antd';
import styles from './index.less';

export default ({ data, isMonth }) => {
  const renderItem = (values, index) => {
    const SOptions = ['市场运营', '不平衡', '其它']; //甘肃特殊项
    const isSpecial = SOptions.includes(values.label);
    const isLast = index === data.length - 1;
    const showDriver = isSpecial || isLast; // 特殊项 || 最后一项 不展示分割线

    const render = (key) => {
      switch (key) {
        /* case '差额费用':
        return (
            <div className={styles.container_right}>
              <div className={styles.quantity}>差额电量</div>
              <div className={styles.quantity_unit}>
                <span>{values.quantity || '-'}</span>
                <label>万元</label>
              </div>
              <div className={styles.price}>现货均价</div>
              <div className={styles.price_unit}>
                <span>{values.price || '-'}</span>
                <label>万元</label>
              </div>
            </div>
          ); */
        default:
          return (
            <div className={styles.container_right}>
              <div className={styles.quantity}>实际</div>
              <div className={styles.quantity_unit}>
                <span>{values.actualBIncome === 0 ? 0 : values.actualBIncome || '-'}</span>
                <label>万元</label>
              </div>
              <div className={styles.price}>模拟</div>
              <div className={styles.price_unit}>
                <span>{values.simulateAIncome === 0 ? 0 : values.simulateAIncome || '-'}</span>
                <label>万元</label>
              </div>
            </div>
          );
      }
    };
    return (
      <>
        <div
          className={styles.container}
          // style={{ width: isSpecial ? 81 : isLonger ? 240 : 330 }}
        >
          <div className={styles.container_left}>
            <h3>
              {values.totalName}{' '}
              <Tooltip
                overlayStyle={{
                  fontSize: 12,
                }}
                arrowPointAtCenter
                title={values.toolTipInfo}
              >
                <QuestionCircleOutlined className={styles.icon} />
              </Tooltip>
            </h3>
            {/* <div className={styles.income}>
              {values.label !== '现货考核'
                ? values.label === '偏差考核'
                  ? '费用'
                  : '收入'
                : '考核电费'}
            </div> */}
            <div className={styles.unit}>
              <span>{values.totalIncome === 0 ? 0 : values.totalIncome || '-'}</span>
              <label>万元</label>
            </div>
          </div>
          {!isSpecial ? render(values.totalName) : ''}
        </div>
        {!showDriver && (
          <Divider
            type="vertical"
            style={{ height: 50, borderLeft: '1px solid var(--ant-cus-bd_default)' }}
          />
        )}
      </>
    );
  };
  return (
    <>
      {data.map((item, index) => {
        return <>{renderItem(item, index)}</>;
      })}
    </>
  );
};
